<template>
  <div class="flex-center user-avatar" @click="to ? $router.push(to) : null" :style="to ? {cursor: 'pointer'} : null">
    <el-image :src="avatar" class="avatar-image" fit="cover">
      <div slot="error">
        <img class="image-error" :src="defaultAvatar" alt="avatar"/>
      </div>
    </el-image>
    <slot></slot>
  </div>
</template>

<script>
import defaultAvatar from '@/assets/avatar.png'

export default {
  name: 'user-avatar',
  props: {
    to: {},
    avatar: {
      type: String,
      default: defaultAvatar
    }
  },
  data () {
    return {
      defaultAvatar
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .avatar-image {
    width: $layout-head-height * 0.5;
    height: $layout-head-height * 0.5;
    border-radius: 50%;
    overflow: hidden;

    ::v-deep .el-image__inner {
      width: 100%;
      height: 100%;
    }
  }
  .image-error {
    max-width: 100%;
  }
</style>
